<template>
  <div class="tw-libnavs">
    <div v-if="mouseenterTab === true"
      class="tw-libnavs-inner">
      <ul class="tw-libnavs-body">
        <li :class="[nav.active||nav.value===activeName?'xactive':'', nav.className || '', `js-nav${idx}`, nav.children?'xparent':'']"
          v-for="(nav,idx) in navs"
          :key="idx"
          @mouseenter="handleEnter(nav.value)">
          <a v-if="nav.href"
            :href="nav.href + (dataIsFromPortal && nav.pageType !== '4' ? `?pageId=${nav.pageId}` : '')"
            :target="nav.target">
            <span>{{nav.name}}</span>
          </a>
          <a v-else>
            <span>{{nav.name}}</span>
          </a>

          <tw-poppane v-if="nav.children"
            :class="['xlibnav', `js-poppane-${idx}`]"
            :switch="`.js-nav${idx}`">
            <ul class="tw-libnav-menus">
              <li v-for="(lv1Menu, lv1Idx) in nav.children"
                :key="`${idx}-${lv1Idx}`"
                :class="[lv1Menu.active?'xactive':'', `js-nav${idx}-${lv1Idx}`, lv1Menu.children?'xparent':'']">
                <a v-if="lv1Menu.href"
                  :href="lv1Menu.href + (dataIsFromPortal && lv1Menu.pageType !== '4' ? `?pageId=${lv1Menu.pageId}&parentId=${nav.pageId}` : '')"
                  :target="lv1Menu.target">{{lv1Menu.name}}</a>
                <a v-else>
                  <span>{{lv1Menu.name}}</span>
                </a>

                <tw-poppane v-if="lv1Menu.children"
                  :class="['xlibnav', `js-poppane-${idx}-${lv1Idx}`]"
                  :switch="`.js-nav${idx}-${lv1Idx}`"
                  placement="right-top">
                  <ul class="tw-libnav-menus">
                    <li v-for="(lv2Menu, lv2Idx) in lv1Menu.children"
                      :key="`${idx}-${lv1Idx}-${lv2Idx}`"
                      :class="[lv2Menu.active?'xactive':'', `js-nav${idx}-${lv1Idx}-${lv2Idx}`]">
                      <a v-if="lv2Menu.href"
                        :href="lv2Menu.href + (dataIsFromPortal && lv2Menu.pageType !== '4' ? `?pageId=${lv2Menu.pageId}&parentId=${lv1Menu.pageId}&rootPageId=${nav.pageId}` : '')"
                        :target="lv2Menu.target">{{lv2Menu.name}}</a>
                      <a v-else>
                        <span>{{lv2Menu.name}}</span>
                      </a>
                    </li>
                  </ul>
                </tw-poppane>
              </li>
            </ul>
          </tw-poppane>
        </li>
      </ul>
    </div>
    <div v-else
      class="tw-libnavs-inner">
      <ul class="tw-libnavs-body">
        <li :class="[nav.active?'xactive':'', nav.className || '', `js-nav${idx}`, nav.children?'xparent':'']"
          v-for="(nav,idx) in navs"
          :key="idx">
          <a v-if="nav.href"
            :href="nav.href + (dataIsFromPortal && nav.pageType !== '4' ? `?pageId=${nav.pageId}` : '')"
            :target="nav.target"
            @click="handleNavClick(nav, navs, $event)">
            <span>{{nav.name}}</span>
          </a>
          <a v-else
            @click="handleNavClick(nav, navs, $event)">
            <span>{{nav.name}}</span>
          </a>

          <tw-poppane v-if="nav.children"
            :class="['xlibnav', `js-poppane-${idx}`]"
            :switch="`.js-nav${idx}`">
            <ul class="tw-libnav-menus">
              <li v-for="(lv1Menu, lv1Idx) in nav.children"
                :key="`${idx}-${lv1Idx}`"
                :class="[lv1Menu.active?'xactive':'', `js-nav${idx}-${lv1Idx}`, lv1Menu.children?'xparent':'']">
                <a v-if="lv1Menu.href"
                  :href="lv1Menu.href + (dataIsFromPortal && lv1Menu.pageType !== '4' ? `?pageId=${lv1Menu.pageId}&parentId=${nav.pageId}` : '')"
                  :target="lv1Menu.target">{{lv1Menu.name}}</a>
                <a v-else>
                  <span>{{lv1Menu.name}}</span>
                </a>

                <tw-poppane v-if="lv1Menu.children"
                  :class="['xlibnav', `js-poppane-${idx}-${lv1Idx}`]"
                  :switch="`.js-nav${idx}-${lv1Idx}`"
                  placement="right-top">
                  <ul class="tw-libnav-menus">
                    <li v-for="(lv2Menu, lv2Idx) in lv1Menu.children"
                      :key="`${idx}-${lv1Idx}-${lv2Idx}`"
                      :class="[lv2Menu.active?'xactive':'', `js-nav${idx}-${lv1Idx}-${lv2Idx}`]">
                      <a v-if="lv2Menu.href"
                        :href="lv2Menu.href + (dataIsFromPortal && lv2Menu.pageType !== '4' ? `?pageId=${lv2Menu.pageId}&parentId=${lv1Menu.pageId}&rootPageId=${nav.pageId}` : '')"
                        :target="lv2Menu.target">{{lv2Menu.name}}</a>
                      <a v-else>
                        <span>{{lv2Menu.name}}</span>
                      </a>
                    </li>
                  </ul>
                </tw-poppane>
              </li>
            </ul>
          </tw-poppane>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import page from '../tw-lib-base/page/mixins'

export default {
  name: 'navigate',

  mixins: [style, page],

  props,

  data() {
    return {
      activeName: '1',
      current: 0
    }
  },

  computed: {
    navs() {
      const roleIdList = this.$twApp.user.roleIdList || []
      const result = JSON.parse(
        JSON.stringify(this.dataIsFromPortal ? this.apiNavList : this.navList)
      )
      const pathname = window.location.href
      const navList = []

      const fn = (list, parent) => {
        if (parent) {
          parent.children = []
        }

        list.forEach(item => {
          // 判断用户所在的机构类型是否有该导航的权限
          if (
            !item.pageOrgTypes ||
            item.pageOrgTypes.length === 0 ||
            item.pageOrgTypes.includes(vm.$twApp.user.orgType)
          ) {
            // 判断用户所在的角色是否有该导航的权限
            if (
              !item.roles ||
              item.roles.length === 0 ||
              roleIdList.filter(role => item.roles.includes(role)).length > 0
            ) {
              if (item.activeText) {
                item.active = pathname.includes(item.activeText)
              } else if (item.href) {
                item.active = pathname.includes(item.href.replace(/^\./, ''))
              }

              if (parent) {
                parent.children.push(item)
              } else {
                navList.push(item)
              }

              if (item.children && item.children.length > 0) {
                fn(item.children, item)
              }
            }
          }
        })
      }

      fn(result)
      return navList
    },

    style() {
      return {
        height: this.height,
        color: this.color,
        bgColor: this.bgColor,
        activeColor: this.activeColor,
        fontSize: this.fontSize,
        activeBgColor: this.activeBgColor,
        dropBgColor: this.dropBgColor,
        dropText: this.dropText,
        dropBoxColor: this.dropBoxColor,
        arrowColor: this.arrowColor,
        navPadding: this.navPadding
      }
    }
  },

  methods: {
    setStyle() {
      let style = `
        ::root.tw-libnavs {
          color: ${this.color};
          background: ${this.bgColor};
          font-size: ${this.fontSize};
        }

        ::root .tw-libnavs-body > li > a {
          padding: ${this.navPadding};
        }

        ::root .tw-libnavs-body > li > a:hover,
        ::root .tw-libnavs-body > li.xactive > a,
        ::root .tw-libnavs-body > li > a.xactive {
          color: ${this.activeColor};
          background-color: ${this.activeBgColor};
        }

        .tw-libnav-menus > li {
          background-color: ${this.dropBoxColor};
        }

        .tw-libnav-menus > li > a {
          color: ${this.dropText}
        }

        .tw-libnav-menus > li > a:hover {
          background-color: ${this.dropBgColor};
        }

        .tw-triangle.xright {
          color: ${this.arrowColor}
        }

      `

      if (this.exhibition) {
        let exstyle = 'Glow'
        if (this.exhstyle) {
          exstyle = this.exhstyle
        }
        style += `
          ::root .tw-libnavs-body > li > a:hover,
          ::root .tw-libnavs-body > li.xactive > a,
          ::root .tw-libnavs-body > li > a.xactive {
            animation: ${exstyle} 2.5s ease infinite alternate;
          }
        `
      }

      this.addStyle(style)
    },

    handleEnter(tab) {
      this.activeName = tab
      this.$emit('input', this.activeName)
      this.$emit('change', this.activeName)
    },

    handleNavClick(nav, navs, event) {
      if (typeof this.clickNavHandler === 'function') {
        const result = this.clickNavHandler(nav, navs)

        if (result === false) {
          event.preventDefault()
        }
      }
    }
  },

  mounted() {
    if (this.mouseenterTab) {
      this.activeName = this.value || this.navs[0].value
      this.handleEnter(this.activeName)
    }
  },

  watch: {
    navs() {
      if (this.mouseenterTab) {
        this.activeName = this.value || this.navs[0].value
        this.handleEnter(this.activeName)
      }
    },

    value(val) {
      if (this.activeName !== val) {
        this.activeName = val
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
